<template>
  <section class="tab-title" @click="emit('switch', props.index)">
    <span :class="{ active: index == currentIndex }">{{ title }}</span>
    <section v-if="index == currentIndex" class="tab-bottom bt-active"></section>
  </section>
</template>
<script setup lang="ts">
const props = defineProps<{
  title: string
  index: string
  currentIndex: string
}>()

const emit = defineEmits(['switch'])
</script>
<style scoped>
.tab-title {
  height: 32px;
  line-height: 32px;
  padding-left: 20px;
  cursor: pointer;
  span {
    font-family: 'AlibabaPuHui-regular';
    font-size: 14px;
    color: white;
  }
}

.tab-bottom {
  border: 2px solid white;
}

.active {
  color: #1684fc !important;
}

.bt-active {
  border-color: #1684fc !important;
}
</style>
